<!doctype html>
<html lang="zh-CN">

<head>
    <title>首页</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/com-hea.css">
    <link rel="stylesheet" href="./css/com-bottom.css">
    <style>
        .find-we-form {
            position: absolute;
            bottom: -190px;
            left: 20%;
            height: 500px;
            width: 60%;
            display: flex;
            background: white;
            box-shadow: 0 0 10px #eee;
        }
        
        .find-left {
            flex: 3 3 0;
            height: 100%;
            padding: 50px;
        }
        
        .find-right {
            flex: 2 2 0;
            position: relative;
            height: 100%;
        }
        
        .find-right>div {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            box-sizing: border-box;
            padding: 50px;
            background: rgba(1, 126, 168, 0.7);
        }
        
        .font-title {
            padding-bottom: 50px;
        }
        
        .font-title>h1 {
            font-size: 22px;
            padding-bottom: 20px;
        }
        
        .font-title>span {
            display: inline-block;
            width: 80px;
            height: 2px;
        }
        
        .input-wrap {
            margin-bottom: 20px;
        }
        
        .input-wrap>input {
            flex: 1 1 0;
            padding: 15px 0;
            color: #999;
            font-size: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .input-wrap>input:first-of-type {
            margin-right: 30px;
        }
        
        .textarea>p {
            padding-bottom: 20px;
            padding-top: 14px;
            font-size: 15px;
            color: #807e7e;
        }
        
        .textarea>textarea {
            width: 100%;
            height: 60px;
        }
        
        .find-left>button {
            margin-top: 35px;
            padding: 10px 45px;
            background: #0099cc;
            font-size: 15px;
            color: white;
        }
        
        .find-right p {
            padding: 8px 0;
            line-height: 22px;
            color: white;
            font-size: 15px;
        }
        
        .find-right>div>img {
            margin-top: 15px;
        }
    </style>
</head>

<body>

    <!-- 公共头部 -->
    <div style="box-shadow: 0 0 15px #eee;">
        <div class='com-hea-wrap'>
            <div class='dis-spa'>
                <img src="./img/logo.png" style="height:55px;width: 228px;">
                <div class='dis-spa hea-contro'>
                    <span>
                            <a href="index.html">首页</a>
                        </span>
                    <span>
                           <a href="over-meth.html">行业方案</a>
                        </span>
                    <span>
                            <a href="cooperation.html">合作案例</a>
                        </span>
                    <span>
                            <a href="news.html">新闻中心</a>
                        </span>
                    <span>
                            <a href="intro-we.html">关于我们</a>
                        </span>
                    <span class='hea-active'>
                            <a href="">联系我们</a>
                        </span>
                </div>
            </div>
        </div>
    </div>
    <!-- 公共头部 -->

    <!-- 滚动公共头部 -->
    <div id='scr-hea'>
        <div class='com-hea-wrap'>
            <div class='dis-spa'>
                <img src="./img/logo.png" style="height:55px;width: 228px;">
                <div class='dis-spa hea-contro'>
                    <span>
                                <a href="index.html">首页</a>
                            </span>
                    <span>
                               <a href="over-meth.html">行业方案</a>
                            </span>
                    <span>
                                <a href="cooperation.html">合作案例</a>
                            </span>
                    <span>
                                <a href="news.html">新闻中心</a>
                            </span>
                    <span>
                                <a href="intro-we.html">关于我们</a>
                            </span>
                    <span class='hea-active'>
                                <a href="">联系我们</a>
                            </span>
                </div>
            </div>
        </div>
    </div>
    <!-- 滚动公共头部 -->

    <!-- 输入验证码的弹窗 -->
    <div id='mask-invi' style="display:none;">
        <div class='inva-par'>
            <h1 class='dis-spa'>
                <span>请输入验证码</span>
                <span class='hover' onclick="$('#mask-invi').fadeOut(500)">X</span>
            </h1>
            <p>请输入下面的验证码</p>
            <input type="text">
            <div style="color:#0099CC;">
                <img src="" alt=""> 看不清，重新更新
            </div>
            <div class='sub-invi-wrap' style="padding:16px 20px;">
                <p>确认</p>
                <p style="background:#68B737;margin-left: 20px;">取消</p>
            </div>
        </div>
    </div>
    <!-- 输入验证码的弹窗 -->

    <div style="min-width:1500px;position: relative;margin-bottom: 230px;">
        <img src="./img/find-we.png" width="100%">
        <div class="find-we-form">
            <div class='find-left'>
                <div class='font-title'>
                    <h1>给我们发信息</h1>
                    <span style="background:#0099cc;"></span>
                </div>
                <div class='dis-spa input-wrap'>
                    <input type="text" placeholder="姓名">
                    <input type="text" placeholder="邮箱">
                </div>
                <div class='dis-spa input-wrap'>
                    <input type="text" placeholder="电话">
                    <input type="text" placeholder="公司">
                </div>
                <div class='textarea'>
                    <p>留言</p>
                    <textarea></textarea>
                </div>
                <button onclick="$('#mask-invi').fadeIn(500)">提交</button>
            </div>
            <div class='find-right'>
                <img src="./img/find-bg.png" width="100%" height="100%">
                <div>
                    <div class='font-title'>
                        <h1 style="color:white;">联系我们</h1>
                        <span style="background:white;"></span>
                    </div>
                    <p>总部：重庆市渝中区经纬大道789号美源.美源大厦12层</p>
                    <p>联系电话：023-63410620</p>

                    <p>邮箱：service@xi-tech.com.cn </p>

                    <p>微信：17353262583 17365294814</p>
                    <img src="./img/share.png" style="width:163px;height:16px;">
                </div>
            </div>
        </div>
    </div>

    <!-- 公共底部 -->


    <div class='com-bottom'>
        <div class='dis-spa com-bot-top'>
            <div class='com-bottom-left'>
                <p>
                    <img src="./img/logo-2 .png" style="width:124px;height:40px;">
                </p>
                <div id='bottom-a'>
                    <a href="index.html">首页</a>
                    <a href="over-meth.html">行业方案</a>
                    <a href="cooperation.html">合作案例</a>
                    <a href="news.html">新闻中心</a>
                    <a href="intro-we.html">关于我们</a>
                    <a class='bom-a-active' href="find-we.html">联系我们</a>
                </div>
            </div>
            <div class='com-bottom-right'>
                <p>总部：重庆市渝中区经纬大道789号美源.美源大厦12层</p>
                <p>联系电话：023-63410620</p>
                <p>邮箱：service@xi-tech.com.cn</p>
                <p>微信：17353262583 17365294814</p>
            </div>
        </div>
        <div class='dis-spa com-bot-bottom'>
            <p>©20178中国区块链溯源信息系统-智鼎溯源 备案号：1321544421215321231</p>
            <p>
                <img src="./img/logo-2-black.png" height="18px">
            </p>
        </div>
    </div>
    <!-- 公共底部 -->



    <script src="./js/jquery.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/scrollReveal.js"></script>
    <script src="./js/com.js"></script>
    <script>
        $('.hea-contro').hover(function(ev) {
            var el = $(ev.target);
            if (el.index() != 5) {
                $('.hea-active').removeClass('hea-active');
            }
        }, function(el) {
            $($('.hea-contro').eq(0).children()[5]).addClass('hea-active');
            $($('.hea-contro').eq(1).children()[5]).addClass('hea-active');
        });
        $('#bottom-a a').hover(function(ev) {
            var el = $(ev.target);
            if (el.index() != 5) {
                $('.bom-a-active').removeClass('bom-a-active');
            }
        }, function() {
            $('#bottom-a a').eq(5).addClass('bom-a-active');
        });
    </script>
</body>

</html>